<template>
  <el-container>
    <el-aside width="200px" class="sidebar-container">
      <el-menu
        :default-active="$route.path"
        class="sidebar-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router>
        
        <!-- 营销管理 -->
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-marketing"></i>
            <span>营销管理</span>
          </template>
          <el-menu-item index="/consultationManagement">咨询管理</el-menu-item>
          <el-menu-item index="/reservationManagement">预定管理</el-menu-item>
          <el-menu-item index="/promotionManagement">促销管理</el-menu-item>
        </el-submenu>

        <!-- 其他菜单项可以继续添加 -->
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <h1>营销管理</h1>
      </el-header>
      <el-main>
        <div class="marketing-content">
          <!-- 咨询管理 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>咨询管理</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleConsultation">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-phone-outline" style="font-size: 48px; color: #409EFF;"></i>
              <h2>50</h2>
              <p>今日咨询数量</p>
            </div>
          </el-card>

          <!-- 预定管理 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>预定管理</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleReservation">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-date" style="font-size: 48px; color: #67C23A;"></i>
              <h2>30</h2>
              <p>今日预定数量</p>
            </div>
          </el-card>

          <!-- 促销管理 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>促销管理</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handlePromotion">查看详情</el-button>
            </div>
            <div class="text-center">
              <i class="el-icon-goods" style="font-size: 48px; color: #E6A23C;"></i>
              <h2>5</h2>
              <p>当前促销活动</p>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'MarketingManagement',
  methods: {
    handleConsultation() {
      this.$message.success('咨询管理详情功能待实现')
    },
    handleReservation() {
      this.$message.success('预定管理详情功能待实现')
    },
    handlePromotion() {
      this.$message.success('促销管理详情功能待实现')
    }
  }
}
</script>

<style scoped>
.sidebar-container {
  background-color: #304156;
}

.marketing-content {
  padding: 20px;
  display: flex;
  justify-content: space-around;
}

.box-card {
  width: 30%;
}

.text-center {
  text-align: center;
  margin-top: 20px;
}
</style> 